<script setup>
//张三返校申请核查资料
const toNext=()=>{
  uni.navigateTo({
    url:"/teacher/demo/tyshqh"
  })
}
const toAgree = () => {
  uni.navigateTo({
    url: "/teacher/demo/bhfxshq"  // 跳转到同意申请的目标页面
  })
}

import { ref } from 'vue'

// 创建响应式数据，控制弹窗显示状态（默认不显示）
const showModal = ref(false)

// 显示大图函数 - 点击图片时触发
const showEnlargedImage = () => {
  // 将弹窗状态设置为true，显示大图弹窗
  showModal.value = true
}

// 关闭大图函数 - 点击弹窗背景时触发
const closeEnlargedImage = () => {
  // 将弹窗状态设置为false，隐藏大图弹窗
  showModal.value = false
}
</script>

<template>
  <view class="main">

    <view class="bj">
      <text class="tip">
        <image class="img" src="/static/image/tip.png"></image>
        可关注“成电智慧学工”服务号获取审批通知
      </text>
    </view>
    <view class="input">
      <view class="item-header">
        <text claass="item-name">张三</text>
        <text claass="item-id">123456789</text>
      </view>
      <!--    申请时间-->
      <view class="item-apply-time">申请时间：2025-10-10-10:00:00</view>
      <!--    专业-->
      <view class="item-major">软件工程</view>
      <view class="item-footer">
        <view class="item-avatar">头像</view>
        <text class="item-status">申请中</text>
      </view>
    </view>
    <view class="input2">
      <!--    第二个框-->

      <view class="time">
        <b>返校时间：</b><br>
        2025-10-11
      </view>
      <view class="dizhi">
        <b>家庭地址：</b><br>
        山西省大同市云岗区
      </view>
      <view class="xxdizhi">
        <b>详细地址：</b><br>
        朝阳小区2单元3号楼
      </view>
      <view class="liyou">
        <b>申请理由：</b><br>
        回校学习
      </view>
      <view class="book">
        <b>健康申报卡：</b><br>

        <!-- 点击图片显示大图 - 添加点击事件监听 -->
        <view id="img2" @click="showEnlargedImage">
          <!-- logo图片 -->
          <image class="tp" src="/static/image/img_2.png"></image>
        </view>

        <!-- 大图弹窗 - 使用v-if条件渲染，当showModal为true时显示 -->
        <view v-if="showModal" class="modal" @click="closeEnlargedImage">
          <!-- 弹窗中的大图 -->
          <image class="modal-image" src="/static/image/img_2.png"></image>

        </view>

      </view>
      <view class="dj">点击图片支持放大</view>

    <view>
      <b>当前位置</b><br>
      山西省大同市云岗区
    </view>
  </view>
    <view class="input3">
      <!--    第3个框-->

      <view >
        <b>返校乘车日期：</b><br>
        2025-10-11
      </view>
      <view >
        <b>交通工具：</b><br>
        飞机
      </view>

      <view >
        <b>班次：</b><br>
        8：00
      </view>
      <view>
        <b>预计返校时间：</b><br>
        2025-10-11-11：00
      </view>

    </view>

    <view class="button">
      <button :disabled="disabled" type="primary" @click="toNext()">同意申请 </button>

    </view>
    <button :disabled="disabled" type="default" class="reject-btn" @click="toAgree()" >驳回自愿返校申请</button>

    <view class="bh">驳回学生可继续申请</view>
  </view>
</template>

<style scoped>
.main{
  height: 4000px;
  width: 100%;
  background-color: rgba(239,239,244,1);

}
.bj{
  width: 100%;
  height: 28px;
  background: #DEE9FF;
  padding: 8px;
}

/*文本样式*/
.tip{
  font-weight: 400;
  font-size: 12px;

  letter-spacing: 0;/*字体间距*/
  display: flex;
  align-items: center;
}
/*图片样式*/
.img{
  width: 16px;
  height: 16px;
  top:3px;
}
.input{
  height: 170px;
  background-color: white;
  padding: 15px;
  margin: 10px;

}
.item-header {
  display: flex;
  justify-content: space-between;
  margin: 8px;
}
.item-name{
  font-weight: bold;
  font-size: 16px;
}
.item-id {
  color: #999;
  font-size: 14px;
}
.item-apply-time{
  color: orange;
  font-size: 14px;
  margin: 8px;
}
.item-major{
  margin: 8px;
  color: #999;
  font-size: 14px;
}
.item-footer {
  display: flex;
  align-items: center;
}
.item-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 50%; /* 圆形头像 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 12px;
}
.item-status {
  color: green;
  margin-right: 10px;
}
.item-action {
  color: #999;
  font-size: 14px;
  display:flex;
  align-items: center;
}
.input2{
  height: 470px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-style: normal;
  font-size: large;

  margin: 10px 10px;
}

/* logo图片容器样式 - 用于居中显示 */
.img1 {
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中对齐 */
  cursor: pointer; /* 鼠标悬停时显示手型光标，提示可点击 */

}

/* logo图片样式设置 */
.tp {
  width: 150px; /* 设置图片宽度为150像素 */
  height: 150px; /* 设置图片高度为150像素 */
  /* 距离容器顶部100像素 */
}


/* 弹窗样式 */
.modal {
  position: fixed; /* 固定定位 */
  top: 0;          /* 距离顶部0像素 */
  left: 0;         /* 距离左侧0像素 */
  width: 100%;     /* 宽度占满整个屏幕 */
  height: 100%;    /* 高度占满整个屏幕 */
  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
  display: flex;   /* 使用弹性布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center;     /* 垂直居中对齐 */
  z-index: 1000;   /* 设置层级，确保弹窗在最上层 */
}

/* 弹窗中的大图样式 */
.modal-image {
  max-width: 80%;  /* 最大宽度为屏幕的80% */
  max-height: 80%; /* 最大高度为屏幕的80% */
}
.dj{
  color: #999999;
}
.button{
  margin: 30px 10px;
}
.reject-btn {

  padding: 12px;
  border: 1px solid #ff4d4f;
  background-color: white;
  color: #ff4d4f;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin: 20px 10px;
}

.reject-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bh{
  color:#999999;
  display: flex;
  justify-content: center;
}
.input3{
  height: 230px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-style: normal;
  font-size: large;

  margin: 10px 10px;
}
</style>